<template>
  <div class="box">
    <div class="header">
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
      <template #left>
        <van-icon
        name="arrow-left"
        size="18"
        @click-left="$router.back()"
        />
      </template>
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    </div>
    <div class="content">
      <van-sticky :offset-top="44">
        <van-dropdown-menu>
          <van-dropdown-item v-model="priceVal" @change="priceChange" :options="priceOption" />
          <van-dropdown-item v-model="salesVal" @change="salesChange" :options="salesOption" />
          <van-dropdown-item title="筛选" ref="item">
            <h3>价格区间</h3>
            <van-cell center>
              <template #right-icon>
                <van-field v-model="min" placeholder="最低价" />
                -
                <van-field v-model="max" placeholder="最高价" />
              </template>
            </van-cell>
            <div style="padding: 5px 16px;">
              <van-button type="danger" block round @click="onConfirm">
                确认
              </van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </van-sticky>
      <van-card
        v-for="item of list"
        :key="item.proid"
        :num="item.sales"
        :price="item.originprice"
        :desc="item.desc"
        :title="item.proname"
        :thumb="item.img1"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Search, Icon, Toast, Sticky, Field, Card, DropdownMenu, DropdownItem, Cell, Switch, Button } from 'vant'
import { search } from '@/api/search'
Vue.use(Search)
Vue.use(Icon)
Vue.use(Field)
Vue.use(Toast)
Vue.use(Card)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Cell)
Vue.use(Sticky)
Vue.use(Switch)
Vue.use(Button)
export default {
  data () {
    return {
      list: [],
      readyList: [],
      min: '',
      max: '',
      keyword: '',
      priceVal: 0,
      salesVal: 0,
      switch1: false,
      switch2: false,
      priceOption: [
        { text: '默认排序', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 }
      ],
      salesOption: [
        { text: '销量排序', value: 0 },
        { text: '销量升序', value: 1 },
        { text: '销量降序', value: 2 }
      ]
    }
  },
  mounted () {
    this.keyword = this.$route.query.keyword
    search({
      keyword: this.$route.query.keyword
    }).then(res => {
      if (res.data.code === '10002') {
        Toast('暂未找到相关商品')
      } else {
        this.list = res.data.data
        // 深拷贝
        this.readyList = JSON.parse(JSON.stringify(res.data.data))
        const arr = JSON.parse(localStorage.getItem('search')) || []
        const index = arr.indexOf(this.keyword)
        if (index > -1) {
          arr.splice(index, 1)
        }
        arr.unshift(this.keyword)
        console.log(arr)
        localStorage.setItem('search', JSON.stringify(arr))
      }
    })
  },
  methods: {
    priceChange (value) {
      console.log(value)
      if (value === 0) {
        // 深拷贝
        this.list = JSON.parse(JSON.stringify(this.readyList))
      } else if (value === 1) {
        this.list.sort((a, b) => {
          return a.originprice - b.originprice
        })
      } else if (value === 2) {
        this.list.sort((a, b) => {
          return b.originprice - a.originprice
        })
      } else {
      }
    },
    salesChange (value) {
      console.log(value)
      if (value === 0) {
        // 深拷贝
        this.list = JSON.parse(JSON.stringify(this.readyList))
      } else if (value === 1) {
        this.list.sort((a, b) => {
          return a.sales - b.sales
        })
      } else if (value === 2) {
        this.list.sort((a, b) => {
          return b.sales - a.sales
        })
      } else {
      }
    },
    onConfirm () {
      // 只写最低价
      // 深拷贝
      this.list = JSON.parse(JSON.stringify(this.readyList))
      const arr = this.list.filter(item => {
        // 既有最小值也有最大值
        if (this.min !== '' && this.max !== '') {
          return item.originprice > this.min && item.originprice < this.max
        } else if (this.min === '' && this.max !== '') { // 没有最小值有最大值
          return item.originprice > 0 && item.originprice < this.max
        } else { // 只有最小值
          return item.originprice > this.min
        }
      })
      this.list = arr
      // this.min = ''
      // this.max = ''
      this.$refs.item.toggle()
    },
    onSearch () {}
  },
  watch: {
    $route (newVal) {
      this.keyword = newVal.query.keyword
      search({
        keyword: newVal.query.keyword
      }).then(res => {
        if (res.data.code === '10002') {
          Toast('暂未找到相关商品')
        } else {
          this.list = res.data.data
          // 深拷贝
          this.readyList = JSON.parse(JSON.stringify(res.data.data))
          const arr = JSON.parse(localStorage.getItem('search')) || []
          const index = arr.indexOf(this.keyword)
          if (index > -1) {
            arr.splice(index, 1)
          }
          arr.unshift(this.keyword)
          console.log(arr)
          localStorage.setItem('search', JSON.stringify(arr))
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.van-search
  padding 5px 12px
.van-search__content
  margin-left 12px
</style>
